<template>
  <div class="item hand" @click="go2NewsDetail(item)">
    <div class="item_l">
      <h4 class="item_t text_e-2 text_e">{{ item.title }}</h4>
      <p class="item_time">{{ parseTime(item.pushTime) }}</p>
      <p class="item_desc text_e-3 text_e">{{ item.desc }}</p>
      <p class="item_more">{{ $t('see-detail') }} &gt; </p>
    </div>
    <div class="item_r">
      <div class="imgBox">
        <img :src="item.coverImgUrl" alt="" class="img" v-if="item.coverImgUrl"/>
        <img :src="defaultLogo" alt="" class="img" v-else/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.item {
  $w: 100%;
  width: $w;
  flex: 0 0 $w;
  padding: 50px 0;
  color: #2d394b;
  transition: 0.5s all;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #f1f1f1;

  &_l {
    flex-grow: 1;
    animation: fadeIn 1s;
    transition: 1s all;
    padding-right: 100px;
  }

  &_r {
    $w:422px;
    $h:253px;
    flex: 0 0 $w;
    width: $w;
    height: $h;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #f1f1f1;

    .imgBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;

      .img {
        max-width: 100%;
        max-height: 100%;
        transition: transform 0.2s linear;
      }
    }
    transform: scale(1);
    transition: 0.5s all;
  }
  &_t {
    font-size: 24px;
    color: #333;
    margin: 0;
    &:hover {
      color: #d53b76;
    }
  }
  &_time {
    font-size: 16px;
    margin-top: 30px;
    color: #bdbdbd;
  }
  &_desc {
    font-size: 16px;
    margin-top: 26px;
    color: #b5b5b5;
  }
  &_more{
    margin-top: 26px;
    color: #d53b76;
    font-size: 16px;
  }

  &:hover .img {
    transform: scale(1.02);
  }
  @media (min-width: 768px) and (max-width: 1560px) {
    
  }
  @media (max-width: 767px) {
    
  }
}
</style>
